<template>
  <div class="grimm-loading">
    <div class="grimm-loading-x" :style="style">
      <div class="grimm-loading-rect rect-left" :style="styleRect">
        <div class="circle" :style="style"></div>
      </div>
      <div class="grimm-loading-rect rect-right" :style="styleRect">
        <div class="circle" :style="style"></div>
      </div>
    </div>
    <div class="grimm-loading-content" :class="horizonClass">
      <slot></slot>
    </div>
  </div>
</template>
<script>
const COMPONENT_NAME = 'grimm-loading';
export default {
  name: COMPONENT_NAME,
  data() {
    return {};
  },
  props: {
    size: {
      type: Number,
      default: 37,
    },
    horizon: {
      // loading文字是否与icon水平
      type: Boolean,
      default: false,
    },
  },
  computed: {
    style() {
      if (!this.size) {
        return;
      }
      const value = `${this.size}px`;
      return {
        width: value,
        height: value,
      };
    },
    styleRect() {
      if (!this.size) {
        return;
      }
      return {
        width: `${Math.ceil(this.size / 2)}px`,
        height: `${this.size}px`,
      };
    },
    horizonClass() {
      const { horizon } = this;
      if (!this.horizon) {
        return;
      }
      if (horizon) {
        return {
          'grimm-loading-content-horizon': true,
        };
      }
    },
  },
};
</script>
<style lang="stylus">
@import '../../common/stylus/variable.styl';

.grimm-loading {
  color: $loading-tip;
  font-size: $fontsize-regular;
}

.grimm-loading-x {
  animation: loading 1.5s infinite linear;
  position: relative;
}

.grimm-loading-rect {
  position: absolute;
  overflow: hidden;
  top: 0;
}

.circle {
  border: 3px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  z-index: 3;
  transform: rotate(90deg);
}

.rect-left {
  left: 0;

  .circle {
    border: 3px solid $circle-color;
    border-top: none;
    left: 0;
  }
}

.rect-right {
  right: 0;

  .circle {
    border: 3px solid;
    border-color: $circle-color $circle-color $color-red $color-red;
    right: 0;
  }
}

.grimm-loading-content-horizon {
  display: inline-block;
  vertical-align: middle;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
